<template>
  <div class="page-container">
    <a-tabs v-model="activeTabsKey" @change="tabsChangeFn">
      <a-tab-pane :key="0" title="模板信息">
        <div class="template-info-box">
          <a-descriptions title="基本信息" :align="{ label: 'right' }">
            <a-descriptions-item label="模板名称">{{ templateInfo.templateName }}</a-descriptions-item>
            <a-descriptions-item label="合同类型">{{ templateInfo.contractTypeName }}</a-descriptions-item>
            <a-descriptions-item label="客户类型">{{ templateInfo.clientTypeName }}</a-descriptions-item>
            <a-descriptions-item label="状态">{{ templateInfo.templateStateName }}</a-descriptions-item>
            <a-descriptions-item label="备注" :span="2">{{ templateInfo.remark }}</a-descriptions-item>
          </a-descriptions>
          <a-divider />
          <div class="template-file-box">
            <a-descriptions title="模板文件" class="templte-box" :align="{ label: 'right' }">
              <a-descriptions-item label="公司印章">
                <upload-img disabled single v-model="templateInfo.companySealFileId" />
              </a-descriptions-item>
              <a-descriptions-item label="合同模板">
                <a-button type="primary" @click="onDownloadTemplate">预览模板</a-button>
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </a-tab-pane>
      <a-tab-pane :key="1" title="操作记录">
        <div class="operator-box">
          <table-index :table="table" @loadData="loadData">
            <template #content="{ record }">
              <template v-if="record.node === '合同内容变更'">
                <a-button type="outline" @click="() => onHistoryPrivew(record)">查看历史模板</a-button>
              </template>
              <div v-else-if="record.node === '新增'">-</div>
              <template v-else>
                <div v-for="item in record.contentList" :key="item">{{ item }}</div>
              </template>
            </template>
          </table-index>
        </div>
      </a-tab-pane>
    </a-tabs>
  </div>
  <HTMLModal v-model="htmlVisible" :title="htmlTitle" :htmlString="htmlString" />
</template>

<script setup lang="ts">
  import { ref, reactive, onMounted } from 'vue'
  import { useRoute } from 'vue-router'
  import { useFetchTableDataApi, useTable } from '@/hooks/table'
  import { getContractTemplateDetail, previewContractTemplate, getContractOperationRecord } from '@/api/business/contract'
  import { getOperateLog } from '@/api/common'
  import HTMLModal from '../components/html-modal.vue'

  const route = useRoute()
  const htmlTitle = ref('')
  const htmlString = ref('')
  const htmlVisible = ref(false)
  const activeTabsKey = ref(0)
  const tabsChangeFn = (val: any) => {
    activeTabsKey.value = val
  }

  const table = useTable({
    columns: [
      { title: '操作人', dataIndex: 'userName' },
      {
        title: '操作时间',
        dataIndex: 'operateTime',
      },
      { title: '操作节点', dataIndex: 'node' },
      { title: '变更内容', slotName: 'content' },
    ],
  })

  const queryParam = reactive({
    bizId: route.params.id,
    bizType: '29',
  })
  const loadData = useFetchTableDataApi(table, queryParam, getOperateLog)

  const onDownloadTemplate = () => {
    previewContractTemplate({
      id: templateInfo.value.id,
      orderType: route.query.orderType,
    }).then((res) => {
      console.log(res, 'res')
      htmlTitle.value = `${res.result.templateName}模板预览`
      htmlString.value = res.result.contractContent
      htmlVisible.value = true
    })
  }

  const onHistoryPrivew = (record: any) => {
    getContractOperationRecord({
      id: record.bizId,
      updateTime: record.operateTime,
    }).then((res) => {
      htmlTitle.value = `历史模板预览`
      htmlString.value = res.result.contractContent
      htmlVisible.value = true
    })
  }

  const templateInfo = ref<any>({})
  onMounted(() => {
    loadData()
    getContractTemplateDetail({ id: route.params.id }).then((res) => {
      templateInfo.value = res.result
    })
  })
</script>

<style lang="less" scoped>
  .page-container {
    .template-file-box {
      width: 100%;
      display: flex;
      justify-content: space-between;

      .templte-box {
        flex: 1;
      }
    }

    .use-help-box {
      width: 340px;
      height: 413px;
      margin-top: 37.14px;
      margin-right: 20px;
      border: 1px solid #f2f3f5;
      overflow: hidden;

      .help-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-left: 12px;
        width: 340px;
        height: 40px;
        background: #f2f3f5;
        color: #1d2129;
        font-size: 14px;
        font-weight: 600;

        .help-header-button {
          padding-right: 12px;
          height: 100%;
        }
      }

      .help-body {
        height: 372px;
        overflow-y: auto;
        padding: 12px 12px;
        font-size: 14px;
        font-weight: 400;
        color: #1d2129;

        &-header {
          margin-bottom: 8px;
        }

        &-item {
          &-title {
            font-weight: 500;
          }
          &-content {
            font-size: 12px;
            color: #86909c;
          }
        }
      }
    }
  }
</style>
../model/help-option
